import React, { Component } from 'react';
import '../styles/Detail.scss'
import styles from '../styles/Detail.scss'
import { NavBar, Skeleton, Swiper } from 'antd-mobile';
import { StarOutline, SendOutline, TruckOutline, PhoneFill } from 'antd-mobile-icons';
import * as service from '../api/index'
import MySwiper from '../components/MySwiper';

class Detail extends Component {
    constructor(props) {
        super(props);
        this.state = {
            // list: [
            //     { pic: 'https://img1.baidu.com/it/u=191718970,3458087596&fm=253&fmt=auto&app=138&f=JPEG?w=600&h=371' },
            //     { pic: "https://img2.baidu.com/it/u=484262678,1667711579&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1672333200&t=ba510d997f8568aca4c524a91d874425" },
            //     { pic: "https://img2.baidu.com/it/u=3086972215,2273721301&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=321" }
            // ],
            goodinfo: {}
        }
    }

    componentDidMount() {
        service.goodinfo({ goodid: this.props.match.params.id }).then((res) => {
            // 处理服务端返回的图片列表
            res.data.goodinfo.pics = res.data.goodinfo.pics &&
                res.data.goodinfo.pics.map((item, index) => {
                    return { pic: item }
                })

            console.log(res.data.goodinfo);
            // 保存商品详情
            this.setState({
                goodinfo: res.data.goodinfo
            })
        })
    }
    // 顶部返回上一个路由
    back() {
        this.props.history.go(-1);
    }

    addCollection() {
        this.props.history.push('/collection')
    }
    toShopCar() {
        this.props.history.push('/index/shopcar')
    }
    render() {
        return (
            <div className='detail'>
                {/* 顶部导航 */}
                <NavBar onBack={() => { this.back() }}>商品详情</NavBar>
                {/* 商品详情轮播图片 */}
                {/* <Swiper className='swiper'>
                    {
                        this.state.list.map((item,index)=>{
                            return (
                                <Swiper.Item className='swiperItem' key={index}>
                                    <img src={item.pic} alt="" />
                                    <div>{item.index +1}</div>
                                </Swiper.Item>
                            )
                        })
                    }
                */}

                {/* 如果拿到详情数据,渲染商品详情,否则渲染骨架屏 */}
                {/* {
                    this.state.goodinfo.pics&&
                    this.state.goodinfo.pics.length ?
                        <MySwiper swiperlist={this.state.goodinfo.pics} /> :
                        <>
                            <Skeleton.Title animated />
                            <Skeleton.Paragraph lineCount={5} animated />
                        </>
                } */}
                {
                    this.state.props.goodinfo.map((item) => {
                        return (
                            <>
                            {/* 轮播图 */}
                            <MySwiper swiperlist={this.state.goodinfo.pic} />
                            {/* 商品名称 */}
                            <div className="name">
                                {this.state.goodinfo.brandEN} &nbsp;
                                {this.state.goodinfo.brand} &nbsp;
                                {this.state.goodinfo.name}
                            </div>
                            {/* 商品价格 */}
                            <div className="price">
                                ¥ {
                                    this.state.goodinfo.salesPrice ?
                                        this.state.goodinfo.salesPrice.value : 0
                                }
                            </div>
                        </>
                        )
                    })
                }
                {
                    this.state.goodinfo.pic &&
                        this.state.goodinfo.pic.length ?
                        <>
                            {/* 轮播图 */}
                            <MySwiper swiperlist={this.state.goodinfo.pic} />
                            {/* 商品名称 */}
                            <div className="name">
                                {this.state.goodinfo.brandEN} &nbsp;
                                {this.state.goodinfo.brand} &nbsp;
                                {this.state.goodinfo.name}
                            </div>
                            {/* 商品价格 */}
                            <div className="price">
                                ¥ {
                                    this.state.goodinfo.salesPrice ?
                                        this.state.goodinfo.salesPrice.value : 0
                                }
                            </div>
                        </>
                        :
                        <>
                            <Skeleton.Title animated />
                            <Skeleton.Paragraph lineCount={10} animated />
                        </>
                }

                {/* 商品价格及名称 */}
                <div className="proce-name">

                </div>

                {/* 商品底部栏 */}
                <div className="bottomBar">
                    <div className='collection'>
                        <span onClick={() => { this.addCollection() }}><StarOutline /><div>收藏</div></span>
                        <span><SendOutline /><div>分享</div></span>
                        <span onClick={() => { this.toShopCar() }}><TruckOutline /><div>购物车</div></span>
                    </div>
                    <div className='add-buy'>
                        <span>加入购物车</span>
                        <span>立即购买</span>
                    </div>
                </div>

                {/* 侧边 */}
                <div className='customer-service'>
                    <PhoneFill className='PhoneFill' />
                </div>

            </div>
        );
    }
}

export default Detail;